<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Draggable with JavaScript</title>
  <style>
    #draggable {
      width: 100px;
      height: 100px;
      background-color: blue;
      position: absolute;
      cursor: move;
    }
  </style>
</head>
<body>
  <div id="draggable"></div>

  <script>
    let isDragging = false;
    let offsetTop, offsetLeft;

    const element = document.getElementById('draggable');

    function dragStart(e) {
      isDragging = true;
      offsetTop = e.clientY - element.offsetTop;
      offsetLeft = e.clientX - element.offsetLeft;
    }

    function dragging(e) {
      if (!isDragging) return;
      element.style.top = e.clientY - offsetTop + 'px';
      element.style.left = e.clientX - offsetLeft + 'px';
    }

    function dragEnd() {
      isDragging = false;
    }

    element.addEventListener('mousedown', dragStart);
    document.addEventListener('mousemove', dragging);
    document.addEventListener('mouseup', dragEnd);
  </script>
</body>
</html>